<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/shop_page.css">
</head>
<body>
<div id="app">
    <h1>商品列表</h1>
    <button @click="showAddProductDialog = true">新增商品</button>
    <div v-if="showAddProductDialog" class="dialog-overlay">
        <div class="dialog">
            <h2>新增商品</h2>
            <form @submit.prevent="addProduct">

                <label for="productImage">图片URL:</label>
                <input type="text" id="productImage" v-model="newProduct.image" required>

                <label for="productName">名称:</label>
                <input type="text" id="productName" v-model="newProduct.name" required>

                <label for="productPrice">价格:</label>
                <input type="number" id="productPrice" v-model="newProduct.price" required>

                <label for="productDescription">描述:</label>
                <input type="text" id="productDescription" v-model="newProduct.description" required>

                <label for="productAmount">数量:</label>
                <input type="number" id="productAmount" v-model="newProduct.amount" required>

                <button type="submit">提交</button>
                <button type="button" @click="showAddProductDialog = false">取消</button>
            </form>
        </div>
    </div>
    <ul>
        <li>
            <span>编号</span>
            <span>图片</span>
            <span>名称</span>
            <span>价格</span>
            <span>描述</span>
            <span>数量</span>
            <span>加入购物车</span>
        </li>
    </ul>
    <li v-for="product in products" :key="product.id">
        <span>{{ product.id }}</span>
        <span><img :src="product.image" alt="商品图片" height="30px" width="40px"></span>
        <span>{{ product.name }}</span>
        <span>{{ product.price }}</span>
        <span>{{ product.description }}</span>
        <span><input type="number" v-model="product.amount" step="1" min="1" max="100"/></span>
        <span><input type="checkbox" @change="toggleCart(product)"></span>
    </li>
    <button @click="addToCart">添加到购物车</button>


    <h1>购物车</h1>
    <ul>
        <li v-for="item in finalCart" :key="item.id">
            <span>{{ item.id }}</span>
            <span><img :src="item.image" alt="商品图片" height="30px" width="40px"></span>
            <span>{{ item.name }}</span>
            <span>{{ item.price }}</span>
            <span>{{ item.description }}</span>
            <span><input type="number" v-model="item.amount" step="1" min="1" max="100" @change="updateCart(item)"/></span>
            <span><button @click="removeFromCart(item)">删除</button></span>
        </li>
    </ul>
    <button @click="updateCart">更新购物车</button>
    <h2>当前总价: {{ totalPrice }}</h2>








</div>

</body>
<script src="lib/vue.js"></script>
<script src="lib/axios.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            products: [],
            finalCart: [],
            cart: [],
            totalPrice: 0,
            showAddProductDialog: false,
            newProduct: {
                id: '',
                image: '',
                name: '',
                price: 0,
                description: '',
                amount: 0
            }
        },
        created: function() {
            this.fetchProducts();
            this.fetchCart();
        },
        methods: {
            toggleCart: function (product) {
                const productInCart = this.cart.find(item => item.id === product.id);
                if (productInCart) {
                    this.cart = this.cart.filter(item => item.id !== product.id);
                } else {
                    this.cart.push(product);
                }
                // Update the amount in the products array
                const productInProducts = this.products.find(item => item.id === product.id);
                if (productInProducts) {
                    productInProducts.amount = product.amount;
                }
            },
            addToCart: function () {
                axios.post('http://localhost:8080/fisrtDemo_war_exploded/addCart', this.products)
                    .then(response => {
                        console.log('Cart added:', response.data);
                        // Refresh product list and cart data
                        this.fetchProducts();
                        this.fetchCart();
                    })
                    .catch(error => {
                        console.error('Error adding to cart:', error);
                    });
            },
            removeFromCart: function (item) {
                if (confirm('确认删除该商品吗？')) {
                    axios.post('http://localhost:8080/fisrtDemo_war_exploded/removeCart', { id: item.id })
                        .then(response => {
                            console.log('Item removed:', response.data);
                            this.finalCart = this.finalCart.filter(product => product.id !== item.id);
                            this.fetchTotalPrice();
                        })
                        .catch(error => {
                            console.error('Error removing item:', error);
                        });
                }
            },
            updateCart: function () {
                axios.post('http://localhost:8080/fisrtDemo_war_exploded/updateCart', this.finalCart)
                    .then(response => {
                        console.log('Cart updated:', response.data);
                        this.fetchProducts();
                        this.fetchCart();
                        this.fetchTotalPrice();
                    })
                    .catch(error => {
                        console.error('Error updating cart:', error);
                    });
            },
            fetchProducts: function () {
                axios.get('http://localhost:8080/fisrtDemo_war_exploded/getAllShops').then(res => {
                    console.log(res.data);
                    this.products = res.data;
                });
            },
            fetchCart: function () {
                axios.get('http://localhost:8080/fisrtDemo_war_exploded/getAllCartShops').then(res => {
                    console.log(res.data);
                    this.finalCart = res.data;
                    this.fetchTotalPrice();
                });
            },
            fetchTotalPrice: function () {
                axios.get('http://localhost:8080/fisrtDemo_war_exploded/getTotalPrice').then(res => {
                    this.totalPrice = res.data.totalPrice;
                }).catch(error => {
                    console.error('Error fetching total price:', error);
                });
            },
            addProduct: function() {
                axios.post('http://localhost:8080/fisrtDemo_war_exploded/addProduct', this.newProduct)
                    .then(response => {
                        console.log('Product added:', response.data);
                        this.fetchProducts();
                        this.showAddProductDialog = false;
                        this.newProduct = { id: '', image: '', name: '', price: 0, description: '', amount: 1 };
                    })
                    .catch(error => {
                        console.error('Error adding product:', error);
                    });
            }

        },
    });
</script>
</html>